<cnsl-refresh-table
  *ngIf="dataSource"
  (refreshed)="changePage()"
  [timestamp]="dataSource.viewTimestamp"
  [hideRefresh]="true"
  [selection]="selection"
  [loading]="dataSource.loading$ | async"
>
  <ng-container actions *ngIf="selection.hasValue()">
    <ng-content select="[selectactions]"></ng-content>
  </ng-container>

  <div actions>
    <ng-content select="[writeactions]"></ng-content>
  </div>

  <div class="table-wrapper">
    <table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <div class="selection">
            <mat-checkbox
              [disabled]="false"
              color="primary"
              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()"
            >
            </mat-checkbox>
          </div>
        </th>
        <td mat-cell *matCellDef="let row">
          <div class="selection">
            <mat-checkbox
              [disabled]="false"
              color="primary"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
            >
            </mat-checkbox>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="displayName">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.DISPLAYNAME' | translate }}</th>
        <td mat-cell *matCellDef="let membership">
          {{ membership.displayName }}
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.TYPE' | translate }}</th>
        <td mat-cell *matCellDef="let membership">
          <span class="state">{{ getType(membership) }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="orgId">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.ORGID' | translate }}</th>
        <td mat-cell *matCellDef="let membership">
          {{ membership.orgId }}
        </td>
      </ng-container>

      <ng-container matColumnDef="rolesList">
        <th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
        <td mat-cell *matCellDef="let membership">
          <div class="membership-line">
            <mat-chip-listbox class="cnsl-chip-list" aria-label="role selection">
              <mat-chip-option
                [selectable]="false"
                class="cnsl-chip"
                *ngFor="let role of membership.rolesList"
                [removable]="!!userId"
                (removed)="removeRole(membership, role)"
              >
                <div class="cnsl-chip-content">
                  <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
                  <span>{{ role | roletransform }}</span>
                  <button *ngIf="!!userId" matChipRemove>
                    <mat-icon>cancel</mat-icon>
                  </button>
                </div>
              </mat-chip-option>
            </mat-chip-listbox>
            <button
              matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
              (click)="goto(membership)"
              mat-icon-button
              class="goto-btn"
            >
              <mat-icon>navigate_next</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </div>
  <cnsl-paginator
    *ngIf="dataSource"
    class="paginator"
    #paginator
    [timestamp]="dataSource.viewTimestamp"
    [pageSize]="INITIALPAGESIZE"
    [length]="dataSource.totalResult"
    [pageSizeOptions]="[25, 50, 100, 250]"
    (page)="changePage($event)"
  >
  </cnsl-paginator>
</cnsl-refresh-table>
